<template>
  <div id="index">
    <el-row type="flex" justify="center" style="margin-top: 50px;">
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <h2>尊敬的小主您好，客服人员工作时间是工作日9:00 —18:00，请您留言，客服人员上班后会第一时间回复您。</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form v-if="form !== undefined">
              <el-form-item label="类型">
                <mbl-dict-select v-model="form.dictFeedType" :code="'FeedType'" style="width: 100%" />
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="form.username" />
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="form.mobile" />
              </el-form-item>
              <el-form-item label="留言">
                <el-input v-model="form.content" type="textarea" />
              </el-form-item>
              <el-form-item label="相关图片">
                <upload :links="form.picUrls" :size="1" :accept="'.jpg,.jpeg,.png,.gif'" />
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button style="width: 20%" type="primary" @click="submit">提交</el-button>
                <el-button style="width: 20%">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import upload from '@/components/upload/index'
import MblDictSelect from '@/components/MblDictSelect/index'
import api from '@/api/member/ApiFeedBack'
export default {
  name: 'CustomerMessage',
  components: { upload, MblDictSelect },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      form: undefined
    }
  },
  mounted() {
    const { name, phone } = this.user
    this.form = { username: name, mobile: phone, picUrls: [] }
  },
  methods: {
    submit() {
      api.add(this.form).then(res => {
        this.$message.success('操作成功')
      })
    }
  }
}
</script>

<style scoped>
  #index {
    width: 100%;
  }
</style>
